{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Scrolling Nav - Start Bootstrap Template{% endblock %}

{% block layoutstyle %}{% endblock %}

{% block stylesheets %}
  <link href="{{ asset('bundles/applicationbootstrap/css/navigation-menus/scrolling-nav/scrolling-nav.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
  {# Łagodne przejście pomiędzy stronami #}
  <script src="{{ asset('bundles/applicationbootstrap/js/navigation-menus/scrolling-nav/jquery.easing.min.js') }}" type="text/javascript"></script>
  {# Animacja nawigacji #}
  <script src="{{ asset('bundles/applicationbootstrap/js/navigation-menus/scrolling-nav/scrolling-nav.js') }}" type="text/javascript"></script>
{% endblock %}

{% block navigation %} 
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Scrolling Nav</a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        
        </div>
    </nav>
{% endblock %}

{% block body %}

    <!-- Intro Section -->
    <section id="intro" class="intro-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Scrolling Nav</h1>
                    <p>Aby podświetlić przyciski menu do sekcji <strong>body</strong> dodajemy: <code>id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"</code></p>
                    <p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
                    <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
                </div>
            </div>
        </div>
    </section>
    
    <!-- About Section -->
    <section id="about" class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>About Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Services Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Contact Section</h1>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block footer %}{% endblock %}